//进行html的font-size大小等比配置  参数1： 设计图总宽[px]  参数2：最小视口宽度  参数3：平均定义份数  
@designWidth:750px;
.get-html( @mwidth, @min , @all ){
  html{
      font-size:62.5%;
  }
  @designWidth:@mwidth;   
  @minWidth:@min;
  @preWidth:( @designWidth - @min ) / @all;
  @bl:62.5 / @designWidth;
  .set-font( @mwidth );
}
.set-font( @mwidth,  @count:1 ) when ( @count <= (@all + 1) ) {

  @media screen and ( max-width:  @mwidth ){
      html{ font-size: percentage( @bl *@mwidth / 100 )  };
  }    
  .set-font( @designWidth - ( @preWidth * @count ), ( @count + 1 )  );// 递归调用自身
}


.getMediaFont( @width ){    
  html{ font-size: percentage( (62.5/@designWidth) *@width / 100 )  };    
}

//宽度百分比换算  参数1：设计图总宽[px] 参数2：设计图元素宽度[px]  参数3：决定用left还是margin横向定位  参数4：横向定位值[px] 
.width-percent( @mwidth, @width ) { 
  width: percentage( @width / @mwidth );
}
.width-percent( @mwidth, @width, @type ,  @left ) when (@type='margin')  {
  width: percentage( @width / @mwidth );
  margin-left: percentage( @left / @mwidth );
}
.width-percent( @mwidth, @width, @type ,  @left ) when (@type='left')  {
  width: percentage( @width / @mwidth );
  left: percentage( @left / @mwidth );
}

//高度等比缩放，原理是通过字体的缩放 带动em的等比变化 用以控制padding变化撑开高度
.height-percent( @font-size, @top, @bottom )when (ispixel(@font-size)){
  font-size: unit((@font-size/10), rem); 
  padding-top:unit((@top/@font-size), em);   
  padding-bottom:  unit((@bottom/@font-size), em);   
}
.height-em( @height ){
  font-size: 1.2rem; //chrome最小12px 
  height: unit((@height/12), em); 
}
.height-em( @height, @font-size)when (ispixel(@font-size)){
  font-size: unit((@font-size/10), rem);
  height: unit((@height/@font-size), em);
}




//flex
.flex-box( @child , @grow ){
  &{
          display: -moz-box; /*Firefox*/
          display: -webkit-box; /*Safari,Opera,Chrome*/
          display: box;

          -moz-box-align: single ; /*Firefox*/
          -webkit-box-align: single ; /*Safari,Opera,Chrome*/
          box-align: single ;

          -moz-box-lines: multiple; /*Firefox*/
          -webkit-box-lines: multiple; /*Safari,Opera,Chrome*/
          box-lines: multiple;

          display: -webkit-flex; /*webkit*/
          display: flex;
          align-items:center;
          justify-content:center;
  }
   
  &>@{child}{
          box-sizing:border-box;
          -moz-box-flex: @grow; /*Firefox*/
          -webkit-box-flex: @grow; /*Safari,Opera,Chrome*/
          box-flex: @grow;
          flex-grow: @grow;
          flex-shrink: @grow;
  }
}


 